// header.js
const { ref } = Vue;
// 定义 Header
const AppHeader = {
    name: 'AppHeader',
    template: `
       <div class="header">
     <span class="header-title">图书管理系统</span>
        <span class="header-right">
          <span class="welcome-text">欢迎 {{username}},</span>
         <span><a class="login-link" href="/admin/login" @click="logout">注销</a></span>
    </span>
</div>
    `,
    setup() {
        const username = ref('');
        const userData = localStorage.getItem('user');
        console.log("userData",userData);

        username.value = (userData!=null) ? JSON.parse(userData).username : "" ;


        const logout =  () => {
            console.log("注销");
            axiosInstance.post('/api/logout')
                .then(response => {
                    // 清除本地存储中的用户信息
                    localStorage.removeItem('user');
                    message.success("注销成功");
                    // 重定向到登录页面
                    setTimeout(() => {
                        window.location.href = 'admin/login';
                    }, 300);
                })
                .catch(error => {
                    console.error('注销失败:', error);
                });
        };

        return {username, logout };
    }
};
